<template>
  <div class="app-container">
    <el-form class label-width="100px">
      <el-form-item label="工具API密钥">
        <el-input type="text" size="mini" name="secretKey" v-model="temp.secretKey" readonly>
          <template slot="append">
            <el-button size="mini" @click="handleUtilKeySave">重置</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      temp: {
        secretKey: ""
      }
    };
  },
  created() {
    this.$get("/system/setting/info").then(response => {
      this.temp.secretKey = response.data.secretKey;
    });
  },
  methods: {
    handleUtilKeySave() {
      this.$confirm(
        "确定重置工具API密钥？（重置后旧密钥将失效，请谨慎操作！）",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(async () => {
        const loading = this.$loading({ text: "正在重置密钥..." });
        this.$post("/system/setting/setUtilApiKey")
          .then(response => {
            loading.close();
            if (response.success) {
              this.temp.secretKey = response.data.secretKey;
            }
          })
          .catch(err => {
            loading.close();
            console.error(err);
          });
      });
    }
  }
};
</script>